<script setup>
import {useRightMenuStore} from "@/stores/rightMenu.js";
import {useFileListStore} from "@/stores/fileListStore.js";
import {usePathNavigationStore} from "@/stores/pathNavigation.js";
import {usePreviewInfoStore} from "@/stores/previewInfoStore.js";

const rightMenuStore = useRightMenuStore()
const fileListStore = useFileListStore()
function click(menu,closeMenu) {
  if (menu.disabled) return

  if(closeMenu !== false) rightMenuStore.showMenu = false
  console.log(`按下菜单中的: ${menu.label}`,)
  switch (menu.label) {
    case '打开':
      rightMenuStore.openFile();
      break
    case '下载':
      rightMenuStore.download()
      break
    case '压缩下载':
      rightMenuStore.parallelDownloadZip()
      break
    case '上传':
      rightMenuStore.upload()
      break
    case '全选':
      fileListStore.addAllFile()
      break
    case '选择':
      rightMenuStore.selectFile()
      break
    case '抛弃':
      rightMenuStore.discardFile()
      break
    case '反选':
      fileListStore.counterSelection()
      break
    case '复制':
      break
    case '剪切':
      break
    case '粘贴':
      break
    case '重命名':
      break
    case '删除':
      break
    case '前进':
      usePathNavigationStore().goForward()
      break
    case '后退':
      usePathNavigationStore().goBack()
      break
    case '属性':
      usePreviewInfoStore().info()
      break
  }
}

</script>

<template>
  <div class="right-menu">
    <div v-for="(item, index) in rightMenuStore.menuList" :key="index">
      <div class="menu-item" :class="{ 'disabled-item': item.disabled }" @click="click(item)">
        <!-- 图标和文字 -->
        <div class="icon-with-label">
          <el-icon  class="menu-icon">
            <component :is="item.icon" />
          </el-icon>
          <span class="label word">{{ item.label }}</span>
        </div>
        <div class="keys">
          <span class="key word">{{ item.key }}</span>
          <template v-for="(item1,index) in item.img">
            <span v-if="index > 0" class="key word">+</span>
            <el-image style="width: 19px; height: 19px" fit="contain" :src="item1"/>
          </template>
        </div>
      </div>
      <hr v-if="item.split" class="menu-separator" />
    </div>
  </div>
</template>

<style scoped>
.right-menu {
  user-select: none;
  width: 180px;
  background-color: #fff; /* 背景颜色 */
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1); /* 更淡的渐变边框 */
  transition: box-shadow 0.3s ease; /* 平滑过渡效果 */
  padding: 10px; /* 内边距，确保内容与边框有间隔 */
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 5px 0; /* 设置上下间距 */
  padding: 8px; /* 添加内边距 */
  cursor: pointer; /* 鼠标悬停时显示指针样式 */
  border-radius: 8px; /* 圆角 */
}

.menu-item:hover {
  background-color: #f0f0f0; /* 鼠标悬停时的背景颜色 */
}

.disabled-item {
  background-color: #f5f5f5; /* 灰色背景 */
  color: #ccc; /* 灰色文字 */
  cursor: not-allowed; /* 禁用光标 */
}

.disabled-item:hover {
  background-color: #f5f5f5; /* 禁用状态下鼠标悬停的背景颜色 */
}

/* 图标和文字的容器 */
.icon-with-label {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  justify-content: flex-start; /* 水平起始对齐 */
}

/* 图标样式 */
.menu-icon {
  margin-right: 8px; /* 图标与文字之间的间距 */
  font-size: 16px; /* 图标大小 */
  color: #666; /* 图标颜色 */
}

span.label, span.key {
  font-family: "Arial", "Helvetica", sans-serif; /* 现代感强的字体 */
  font-size: 14px;
  font-weight: 600;
}

span.label {
  text-align: left; /* 左对齐 */
}

span.key {
  text-align: right; /* 右对齐 */
}

/* 分隔线样式 */
.menu-separator {
  border: none;
  height: 1px;
  background-color: #ccc; /* 分隔线颜色 */
  margin: 5px 0; /* 分隔线的上下间距 */
}

.keys {
  display: flex;
  align-items: center; /* 垂直居中 */
}
</style>